* {
	margin: 0;
	padding: 0;
}
html,body{
	width:100vw;
	height:100vh;
	
}
a {
	text-decoration: none;
}

img {
	border: none;
}

li {
	list-style: none outside none;
}

body {
	font-size: 13px;
	font-family: "宋体";
}

.myBox {
	position: absolute;
	top:.6rem;
	left:.3rem;
}
.myBox2{
	position: absolute;
	top: 1.31rem;
	left: 1.01rem;
}

.myBox ul {
	margin: 0 auto 0;
	position: relative;
	width: 100vw;
	height: 100vw;
	overflow: hidden;
	
}

.myBox li {
	width:14.7vw;
	height:14.6vw;
	text-align: center;
	/*line-height: ;*/
	font-size: 40px;
	color: #fff;
	background: url(../img/out.png)no-repeat;
	background-size: 100% 100%;

}
.myBox2 li {
	width: 12.5vw;
	height: 12.5vw;
	background: url(../img/in.png)no-repeat;
	background-size: 100% 100%;
}
.myBox li img{
	width: 100%;
	height: 100%;
	margin-top: -5%;
}
.myBox li.on {
	background: url(../img/outon.png)no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
}

.text {
	width: 100%;
	height: 50px;
	overflow: hidden;
	margin: 20px auto 0;
	font-size: 20px;
	line-height: 50px;
	text-align: center;
}
.bt,
.jg,
.zt {
	float: left;
	width: 200px;
}
#button1,#button3{
	width: 1.25rem;
	height: .45rem;
	cursor: pointer;
	z-index: 100000000;
	position: absolute;
	top:3.75rem;
	left: .3rem;
}
#button2,#button4{
	width: 1.25rem;
	height: .45rem;
	cursor: pointer;
	z-index: 100000000;
	position: absolute;
	top:3.75rem;
	left: 2rem;
}
#button3,#button4{
	z-index: 1000100000000;
	display: none;
}
.bt {
	width: 1.25rem;
	height: .45rem;
	cursor: pointer;
}
em {
	font-style: normal;
}
@media only screen and (min-width: 350px) and (max-width: 400px) {
	
	.myBox li {
		width:14.5vw;
		height:14.4vw;
	}
	.myBox2 li {
		width: 12.4vw;
		height: 12.4vw;
	}
}
@media only screen and (min-width: 300px) and (max-width: 350px) {
	
	.myBox li {
		width:14.4vw;
		height:14.3vw;
	}
	.myBox2 li {
		width: 12.3vw;
		height: 12.3vw;
	}
}



